<!DOCTYPE html>
<html lang="zh"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>个人信息 - NexusGo</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            "background": "#ffffff",
            "primary": "#000000",
            "secondary": "#666666",
            "border": "#eeeeee",
            "card": "#ffffff",
            "hover": "#f5f5f5",
          },
          fontFamily: {
            "display": ["Plus Jakarta Sans"]
          },
          borderRadius: {
            "DEFAULT": "0.5rem",
            "lg": "0.75rem",
            "xl": "1rem",
            "full": "9999px"
          },
        },
      },
    }
  </script>
<style>
    .material-symbols-outlined {
      font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
    }
  </style>
</head>
<body class="font-display bg-background text-primary">
<div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden">
<header class="sticky top-0 z-50 flex h-16 w-full items-center justify-between border-b border-border bg-background/80 px-4 backdrop-blur-sm sm:px-6">
<a class="flex items-center gap-2" href="#">
<span class="material-symbols-outlined text-primary text-3xl">explore</span>
<h1 class="text-xl font-bold">NexusGo</h1>
</a>
<div class="hidden items-center gap-6 sm:flex">
<a class="text-sm font-medium text-secondary hover:text-primary" href="#">行程规划</a>
<a class="text-sm font-medium text-secondary hover:text-primary" href="#">灵感发现</a>
<a class="text-sm font-medium text-secondary hover:text-primary" href="#">社区</a>
</div>
<div class="flex items-center gap-4">
<button class="flex items-center justify-center rounded-full size-9 hover:bg-hover">
<span class="material-symbols-outlined text-secondary">notifications</span>
</button>
<a class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-9" href="#" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAan_zgBr5IngbAJQEgbOgKip4uIbNIuMSBM_bGjPLRdEa5POUTDoP8NuJDe0fBRdvzsdEoJMlh9CrOsm-ZnBQjdQHOKEh_z0kkj4SknfhwCPADMMIAs6c69u154olZvnGKEfITJYPUa3BiUqRblWRJD2Snjjui0vNUpZOD6RpvwfgtBvQih8NVin6CZd8iktU8KdpgjKn3iQMlIu16OTaCiqkKcYfEbHo3ZjvMThllSEg7TEYBxJolfiGaTG6OC5vXvHz_KIGLpQ");'></a>
</div>
</header>
<main class="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="flex flex-col gap-8 md:flex-row md:gap-12">
<aside class="w-full md:w-64 md:flex-shrink-0">
<div class="sticky top-24">
<div class="flex flex-col gap-4">
<div class="flex items-center gap-4">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-16" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAZ0xznA2fnvF3shTmyGNZvYENX6yJFKBoBu-0VZZRPibh6BzRj13oOEjgvGdqIH9U-4YFNavZwRF3blFJEx8RlxG8D84fsrZzXBfBicsBUZeitdSGAGUgcSCwoer36RIQmS4ydRF1NmcGAAypQeBvnlJiFmCXm1-vUWoJUMXLJU9j2-j_7O8hUl19MBqupsWPO7zKO8RyU1sjPYIVVplTxhWKeV1IWKXge-HaaRLWhb09pr-qhYO6Fx3H56j5RyRfu8toMoawnbw");'></div>
<div>
<h2 class="text-xl font-bold">Alex Chen</h2>
<p class="text-sm text-secondary">查看并编辑您的个人资料</p>
</div>
</div>
<nav class="mt-4 flex flex-col gap-1">
<a class="flex items-center gap-3 rounded-md bg-hover px-3 py-2 font-medium text-primary" href="#">
<span class="material-symbols-outlined text-base">person</span>
<span class="text-sm">个人信息</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">tune</span>
<span class="text-sm font-medium">旅行偏好</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">pin_drop</span>
<span class="text-sm font-medium">打卡记录</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">dynamic_feed</span>
<span class="text-sm font-medium">发布的帖子</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">collections_bookmark</span>
<span class="text-sm font-medium">收藏内容</span>
</a>
<a class="flex items-center gap-3 rounded-md px-3 py-2 text-secondary hover:bg-hover hover:text-primary" href="#">
<span class="material-symbols-outlined text-base">delete</span>
<span class="text-sm font-medium">回收站</span>
</a>
</nav>
</div>
</div>
</aside>
<div class="flex-1">
<div class="flex flex-col gap-6">
<div class="rounded-xl border border-border bg-card p-6">
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold">个人信息</h3>
<p class="mt-1 text-sm text-secondary">管理您的个人资料，确保信息准确无误。</p>
</div>
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-md h-10 px-4 bg-primary text-background text-sm font-bold leading-normal tracking-[0.015em] hover:opacity-90">
<span class="truncate">编辑</span>
</button>
</div>
<div class="mt-6 border-t border-border">
<dl class="divide-y divide-border">
<div class="py-5 sm:grid sm:grid-cols-3 sm:gap-4">
<dt class="text-sm font-medium text-secondary">头像</dt>
<dd class="mt-1 flex items-center gap-4 text-sm text-primary sm:col-span-2 sm:mt-0">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-12" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAZ0xznA2fnvF3shTmyGNZvYENX6yJFKBoBu-0VZZRPibh6BzRj13oOEjgvGdqIH9U-4YFNavZwRF3blFJEx8RlxG8D84fsrZzXBfBicsBUZeitdSGAGUgcSCwoer36RIQmS4ydRF1NmcGAAypQeBvnlJiFmCXm1-vUWoJUMXLJU9j2-j_7O8hUl19MBqupsWPO7zKO8RyU1sjPYIVVplTxhWKeV1IWKXge-HaaRLWhb09pr-qhYO6Fx3H56j5RyRfu8toMoawnbw");'></div>
</dd>
</div>
<div class="py-5 sm:grid sm:grid-cols-3 sm:gap-4">
<dt class="text-sm font-medium text-secondary">昵称</dt>
<dd class="mt-1 text-sm text-primary sm:col-span-2 sm:mt-0">Alex Chen</dd>
</div>
<div class="py-5 sm:grid sm:grid-cols-3 sm:gap-4">
<dt class="text-sm font-medium text-secondary">性别</dt>
<dd class="mt-1 text-sm text-primary sm:col-span-2 sm:mt-0">男</dd>
</div>
<div class="py-5 sm:grid sm:grid-cols-3 sm:gap-4">
<dt class="text-sm font-medium text-secondary">生日</dt>
<dd class="mt-1 text-sm text-primary sm:col-span-2 sm:mt-0">1995-08-15</dd>
</div>
<div class="py-5 sm:grid sm:grid-cols-3 sm:gap-4">
<dt class="text-sm font-medium text-secondary">电子邮箱</dt>
<dd class="mt-1 text-sm text-primary sm:col-span-2 sm:mt-0">alex.chen@example.com</dd>
</div>
<div class="py-5 sm:grid sm:grid-cols-3 sm:gap-4">
<dt class="text-sm font-medium text-secondary">手机号码</dt>
<dd class="mt-1 text-sm text-primary sm:col-span-2 sm:mt-0">+86 138****5678</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
</main>
</div>

</body></html>